<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
	<a href="" @click.prevent='flag=true'>登录</a>
	<a href="" @click.prevent='flag=false'>注册</a>
	<transition appear mode="out-in">
		<login v-if="flag"></login>
		<register v-else></register>
		<!--<register v-if="!flag"></register>-->
	</transition>
</div>

<script type="text/javascript">
	Vue.component('login', {
		template: '<h3>登录组件<h3>'
	})
	Vue.component('register', {
		template: '<h3>注册组件<h3>'
	})

	var vm = new Vue({
		el: '#app',
		data: {
			flag: true
		},
		methods: {}
	})
</script>

<style type="text/css">
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(180px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.2s ease;
  }
</style>